<script setup>
import { ref, watch } from 'vue';


const props = defineProps({
    //总页数，如果设置了总页数，就不再计算总页数
    totalPages: Number,
    //总数量，和pageSize配合，计算总页数
    total: Number,
    current: {
        type: Number,
        default: 1
    },
    pageSize: {
        type: Number,
        default: 20,
    },
    sizeAround: {
        type: Number,
        default: 2,
    },
    noPageSizeSelector: Boolean
})
const emits = defineEmits(["goto", "change-page-size"])
const shownBtns = ref([])
const _totalPages = ref(1);

watch(() => props.totalPages, () => {
    shownBtns.value = calcuBtns();
}, { immediate: true })

watch(() => props.total, () => {
    shownBtns.value = calcuBtns();
}, { immediate: true })

watch(() => props.current, () => {
    shownBtns.value = calcuBtns();
}, { immediate: true })

watch(() => props.pageSize, () => {
    shownBtns.value = calcuBtns();
}, { immediate: true })

function calcuBtns() {
    var floor = Math.floor(props.total / props.pageSize)
    if (props.totalPages > 0) {
        _totalPages.value = props.totalPages
    } else if (props.total) {
        _totalPages.value = (props.total / props.pageSize - floor) > 0 ? floor + 1 : floor
    } else {
        return [{
            text: "未传入总数",
            notPage: true
        }]
    }
    var pages = [];
    var lastIndex = 0;
    for (let index = 0; index < Math.min(_totalPages.value, props.sizeAround); index++) {
        pages.push({
            text: index + 1
        })
    }

    if (props.current -  props.sizeAround > props.sizeAround + 1) {
        pages.push({
            text: "...",
            notPage: true
        })
    }

    for (let index = Math.max(props.sizeAround + 1, props.current - props.sizeAround); index <= props.current + props.sizeAround; index++) {
        if (index <= _totalPages.value) {
            pages.push({
                text: index
            })
        }
    }

    if (props.current < _totalPages.value - props.sizeAround * 2) {
        pages.push({
            text: "...",
            notPage: true
        })
    }

    var lastIndex
    if (pages[pages.length - 1].notPage) {
        lastIndex = pages[pages.length - 2]?.text
    } else {
        lastIndex = pages[pages.length - 1]?.text
    }
    for (let index = Math.max(lastIndex + 1, _totalPages.value - props.sizeAround + 1); index <= _totalPages.value; index++) {
        pages.push({
            text: index
        })
    }

    return pages;
}

function selectPage(index) {
    emits("goto", index)
}

function selectCPP(e) {
    console.log(e.target.value);
    emits("change-page-size", e.target.value)
}

function goPrev(e) {
    var disabled = e.target.getAttribute('disabled');
    if (disabled == null || disabled == "false") {
        emits("goto", props.current - 1)
    }
}

function goNext(e) {
    var disabled = e.target.getAttribute('disabled');
    if (disabled == null || disabled == "false") {
        emits("goto", props.current + 1)
    }
}
</script>

<template>
    <div style="user-select: none;">
        <template v-if="!noPageSizeSelector">
            <span>每页</span>
            <select name="count_per_page" :value="pageSize" @change="selectCPP">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
            <span>条</span>
        </template>
        <span class="btn" :disabled="current == 1" @click="goPrev">&lt;</span>
        <template v-for="page in shownBtns" :key="page">
            <span v-if="page.notPage" class="btn">{{ page.text }}</span>
            <span @click="selectPage(page.text)" class="btn" :current="current == page.text" v-else>{{
                page.text
            }}</span>
        </template>
        <span class="btn" :disabled="current >= _totalPages" @click="goNext">&gt;</span>
    </div>
</template>

<style lang="scss">
.btn {

    cursor: pointer;

    &[disabled=true] {
        color: #C0C4CC;
    }

    &[current=true] {
        color: var(--apicat-primary-color);
    }

    color: #606266;
    padding: 0 10px;
}
</style>